<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true" label-width="100px">
            <el-form-item label="考场名称">
                <el-input v-model="queryParams.examRoomName" placehodler="请输入考场名称" clearable size="small" @keyup.enter.native="handleQuery"></el-input>
            </el-form-item>
            <el-form-item label="考场地址">
                <el-input v-model="queryParams.examRoomSite" placehodler="请输入考场地址" clearable size="small" @keyup.enter.native="handleQuery"></el-input>
            </el-form-item>
            <el-form-item style="margin-left: 10px">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button style="margin-left: 10px" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
            </el-col>
            <!--<el-col :span="1.5">
                <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除
                </el-button>
            </el-col>-->
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table :data="examRoomList" v-loading="loading" highlight-current-row @selection-change="handleSelectionChange">
<!--            <el-table-column type="selection" width="55" align="center"></el-table-column>-->
            <el-table-column label="序号" align="center" type="index"></el-table-column>
            <el-table-column label="考场名称" align="center" prop="examRoomName" :show-overflow-tooltip="true"/>
            <el-table-column label="考场地址" align="center" prop="examRoomSite" :show-overflow-tooltip="true"/>
            <el-table-column label="座位总数" align="center" prop="seatCount" :show-overflow-tooltip="true"/>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>

        <pagination
                v-show="total>0"
                :total="total"
                :page.sync="pageParams.page"
                :limit.sync="pageParams.rows"
                @pagination="getList"
        />
        <!-- ExamRoom表单，用于新增及修改 -->
        <el-dialog :title="title" :visible.sync="open" v-if="open" width="660px" append-to-body>
            <exam-room-form ref="examRoom" @submitForm="getList" @cancelDialog="cancel"></exam-room-form>
        </el-dialog>
    </div>
</template>

<script>
    import {getExamRoomList,deleteExamRoom} from "@/api/exam/examRoom"
    import examRoomForm from  "./form/examRoomForm"

    export default {
        name: "index",
        components: {
            examRoomForm
        },
        data() {
            return {
                // 遮罩层
                loading: false,
                //总条数
                total: 0,
                //显示搜索条件
                showSearch: true,
                //选中考场名称数组
                examRoomNames: [],
                //选中考场id数组
                examRoomIds: [],
                //非多个禁用
                multiple: true,
                examRoomList: [],
                title: '',
                open: false,
                // 分页参数
                pageParams: {
                    page: 1,
                    rows: 10,
                },
                //表单数据
                queryParams: {
                    //考场名称
                    examRoomName: undefined,
                    //考场地址
                    examRoomSite: undefined
                }
            }
        },
        created(){
            this.getList();
        },
        methods: {
            //查询考场信息
            getList(){
                this.loading = true;
                getExamRoomList({
                        'pageParameter': this.pageParams,
                        'searchParams': this.queryParams
                }).then(response => {
                        this.examRoomList = response.responseBody.result;
                        this.total = response.responseBody.pageParameter.totalCount;
                    }
                )
                this.loading = false;
            },
            //新增
            handleAdd(){
                this.title = "添加考场信息";
                this.open = true;
            },
            //修改
            handleUpdate(row){
                this.title = "修改考场信息";
                this.open = true;
                this.$nextTick(() => {
                    this.$refs.examRoom.init(row.examRoomId);
                })
            },
            //删除
            handleDelete(row){
                const examRoomNames = row.examRoomName || this.examRoomNames;
                const examRoomIds = row.examRoomId || this.examRoomIds;
                this.$confirm("确认删除考场名称为：（" + examRoomNames + "）的数据项吗？","提示",{
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.loading = true;
                    deleteExamRoom(examRoomIds).then(response => {
                        if (response.retCode === '200') {
                            this.msgSuccess("删除成功!");
                            this.getList();
                        }
                    })
                }).catch(() =>{
                }).finally(() => {
                    this.loading = false;
                });
            },

            //重置
            resetQuery() {
                this.queryParams = {}
                this.handleQuery();
            },

            //查询
            handleQuery() {
                this.getList();
            },
            cancel(){
                this.open = false;
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.examRoomNames = selection.map(item => item.examRoomName)
                this.examRoomIds = selection.map(item => item.examRoomId)
                this.multiple = !selection.length
            }
        }
    }
</script>
